<template>
  <view class="wrap">
    <view class="search">
      <!-- <uni-search-bar
        v-model="state.searchValue"
        @cancel="cancelSearch"
        @focus="state.searchFocus = true"
        @input="searchFood"
        @clear="
          () => {
            state.isSearch = false
            state.searchList = []
          }
        "
        placeholder="请搜索运动名称"
      /> -->
      <up-search
        v-model="state.searchValue"
        @custom="cancelSearch"
        @focus="state.searchFocus = true"
        @change="searchFood"
        :show-action="state.isSearch || state.searchFocus"
        @clear="
          () => {
            state.isSearch = false
            state.searchList = []
          }
        "
        actionText="取消"
        placeholder="请搜索运动名称"
      />
    </view>
    <!-- 搜索内容 -->
    <view v-if="state.searchFocus" class="search_content">
      <view v-if="state.sportSearchHistory.length > 0 && !state.isSearch" class="search_history">
        <view class="history_top">
          <view class="title">搜索记录</view>
          <icon type="" @tap="clearSearchHistory" class="iconfont icon-shanchu1 img_del" />
        </view>
        <view class="history_content">
          <view
            class="history_item"
            v-for="(item, index) in state.sportSearchHistory"
            :key="index"
            @tap="historySelect(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      <view v-if="state.searchList.length === 0 && state.isSearch" class="nodata">
        <image class="img_nodata" src="https://ainengli.meilianshuke.com/jkhx/noSearchData.png" />
        <view class="nodata_text">暂无数据，换个搜索条件试试?</view>
      </view>
      <view class="search_list">
        <view class="search_item" v-for="(item, index) in state.searchList" :key="index">
          <view class="name">{{ item.sportName }}</view>
          <image
            v-if="item.checked"
            class="img_right"
            src="https://ainengli.meilianshuke.com/jkhx/common/selected.png"
          />
          <image
            v-if="!item.checked"
            class="img_right"
            @tap="sportAdd(item, 'search')"
            src="https://ainengli.meilianshuke.com/jkhx/common/add.png"
          />
        </view>
      </view>
    </view>
    <!-- 加载状态 -->
    <up-loading-icon v-if="state.loading" text="" size="34" color="#00D1B6" />
    <!-- 列表 -->
    <view v-if="!state.searchFocus && !state.loading" class="content">
      <view class="left">
        <view
          :class="['item', state.active == index ? 'on' : '']"
          v-for="(item, index) in state.typeList.slice(0, 2)"
          :key="index"
          @tap="typeSelect(index)"
        >
          <view v-if="state.active == index" class="line" />
          {{ item.name }}
        </view>
      </view>
      <scroll-view :scroll-top="scrollTop" @scroll="scrollTo" class="scroll-Y" scroll-y="true">
        <view class="right">
          <view class="item" v-for="(item, index) in state.detailList" :key="index">
            <view class="name">{{ item.sportName }}</view>
            <image
              v-if="item.checked"
              class="img_right"
              src="https://ainengli.meilianshuke.com/jkhx/common/selected.png"
            />
            <image
              v-if="!item.checked"
              class="img_right"
              @tap="sportAdd(item, 'list')"
              src="https://ainengli.meilianshuke.com/jkhx/common/add.png"
            />
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 体重设置 -->
    <up-popup
      :show="state.weightShow"
      :round="16"
      mode="bottom"
      closeable
      @close="state.weightShow = false"
    >
      <view class="food_info weight_info">
        <view class="title"> 补充体重 </view>
        <view class="info_top">
          <view class="power" style="margin-bottom: 32rpx">请补充体重，用于计算运动卡路里</view>
        </view>
        <view class="cell">
          <view class="left">当前体重</view>
          <view class="right">
            <input
              class="form_input"
              type="digit"
              @blur="weightfixed"
              v-model="state.nowWeight"
              placeholder="请输入"
              :border="false"
            />
            <text>kg</text>
          </view>
        </view>
        <button class="submit" @tap="weightConfirm">确定</button>
        <view class="weight_bottom" />
      </view>
    </up-popup>
    <!-- 运动设置 -->
    <up-popup :show="state.setShow" :round="16" mode="bottom" closeable @close="close">
      <view class="food_info">
        <view class="title"> 添加运动 </view>
        <view class="info_top">
          <view class="name">{{ state.addSport.sportName }}</view>
        </view>
        <view class="input_info">
          <input
            type="digit"
            class="weight_input"
            :focus="state.tipFocus"
            :maxlength="4"
            @input="onInput"
            :adjustPosition="false"
            @keyboardheightchange="onKey"
            v-model="state.addSport.duration"
          />
          <view class="unit">分钟</view>
          <view class="hot">(根据您的体重计算，消耗约{{ state.addSport.energy || '--' }}千卡)</view>
        </view>
        <button class="submit" @tap="sportSelect">确定</button>
        <view class="bottom_box" :style="{ height: `${state.bottomHeight}rpx` }" />
      </view>
    </up-popup>

    <!-- 运动删除 -->
    <up-popup
      :show="state.mealShow"
      :round="16"
      mode="bottom"
      closeable
      @close="state.mealShow = false"
    >
      <view class="total"> 共{{ state.selected.length }}条记录，总计{{ totalPower }}千卡 </view>
      <view v-if="state.selected.length > 0" class="lists">
        <view v-for="(item, index) in state.selected" :key="index" class="item">
          <view class="left">
            <view class="name">{{ item.sportName }}</view>
            <view class="power">{{ item.duration }}分钟 {{ item.energy }}千卡</view>
          </view>
          <icon type="" @tap="deleteSport(item, index)" class="iconfont icon-shanchu1 img_del" />
        </view>
      </view>
    </up-popup>
    <!-- 固定底部 -->
    <view v-if="!state.setShow && !state.searchFocus" class="fixed">
      <view class="left-label" @tap="showSelectSport">
        <view style="position: relative">
          <up-badge
            :value="state.selected.length"
            type="error"
            :absolute="true"
            :offset="[0, -6]"
          />
          <icon type="" class="iconfont icon-yundong img_type" />
          <!-- <uni-badge
            :text="state.selected.length"
            absolute="rightTop"
            :offset="[2, 8]"
            size="small"
            :custom-style="{ background: '#F53F3F', fontSize: '24rpx' }"
          >
            <icon type="" class="iconfont icon-yundong img_type" />
          </uni-badge> -->
        </view>
        <text class="left-label-text">运动</text>
      </view>

      <!-- </view> -->
      <button v-if="state.selected.length > 0" @tap="finish" class="fixed_btn">保存</button>
      <button v-if="state.selected.length == 0" class="fixed_btn disabled">保存</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { debounce, parseTime, throttle } from '@/utils/tools'
import {
  getSportsInfo,
  saveSportRecord,
  getSportRecord,
  calculateEnergy,
  save_new_weight
} from './sportsInfo.api'
import { get_new_weight } from '@/module/api/sports'
import bus from '@/utils/bus'

const state = reactive({
  userInfo: {},
  searchFocus: false,
  isSearch: false,
  searchValue: '',
  sportSearchHistory: [],
  searchList: [],
  typeList: [],
  detailList: [],
  active: 0,
  type: '',
  date: '',
  selected: [],
  addSport: {},
  addType: '',
  nowWeight: '',
  hasWeight: false,
  mealShow: false,
  setShow: false,
  weightShow: false,
  tipFocus: false,
  loading: false,
  bottomHeight: 0
})
const scrollTop = ref(0)
const oldScrollTop = ref(0)

const totalPower = computed(() => {
  let sum = 0
  if (state.selected.length > 0) {
    state.selected.forEach((item) => {
      sum += item.energy
    })
  }
  return sum
})

onLoad((option) => {
  state.type = option.food ? option.food : ''
  state.date = option.date ? option.date : ''
})
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.sportSearchHistory = uni.getStorageSync('sportSearchHistory')
    ? JSON.parse(uni.getStorageSync('sportSearchHistory'))
    : []
  getSportDict()
  getWeight()
})

const getSportsName = (index: any) => {
  switch (index) {
    case '1':
      return '有氧运动'
    case '2':
      return '抗阻运动'
    case '3':
      return '热身'
    case '4':
      return '拉伸'
    default:
      return ''
  }
}

const getSportDict = () => {
  state.typeList = []
  state.loading = true
  getSportsInfo({ searchKey: '' }).then((res) => {
    console.log(res.data)
    state.loading = false
    const keys = Object.keys(res.data)
    keys.forEach((item) => {
      const data: any = {
        name: getSportsName(item),
        list: res.data[item].map((vo) => {
          return {
            ...vo,
            checked: false
          }
        })
      }
      state.typeList.push(data)
    })
    state.detailList = state.typeList[state.active].list
    getData()
  })
}
const getData = () => {
  const params = {
    empi: state.userInfo.empi,
    date: state.date
  }
  getSportRecord(params).then((res) => {
    console.log(res)
    // 赋值已选中的列表
    // res.data.forEach((item) => {
    //   if (state.type == item.dietType) {
    //     state.selected = item.list
    //   }
    // })
    // state.detailList.forEach((item) => {
    //   // 如果已选中的列表没有为false, 有就为true
    //   item.checked = false
    //   state.selected.forEach((i) => {
    //     if (i.sportId == item.sportId) {
    //       item.checked = true
    //     }
    //   })
    // })
  })
}
const cancelSearch = () => {
  state.searchFocus = false
  state.isSearch = false
  state.searchValue = ''
  state.searchList = []
}
const clearSearchHistory = () => {
  state.sportSearchHistory = []
  uni.removeStorageSync('sportSearchHistory')
}
const searchFood = debounce((e) => {
  if (e == '') {
    state.isSearch = false
    state.searchList = []
    return
  }
  state.isSearch = true
  state.searchList = []
  getSportsInfo({ searchKey: state.searchValue }).then((res) => {
    console.log(res.data)
    // state.searchList = res.data

    const keys = Object.keys(res.data)
    keys.forEach((item) => {
      const data: any = res.data[item].map((vo) => {
        return {
          ...vo,
          checked: false
        }
      })
      state.searchList.push(...data)
    })
    state.searchList.forEach((item) => {
      // 如果已选中的列表没有为false, 有就为true
      item.checked = false
      state.selected.forEach((i) => {
        if (i.sportId == item.sportId) {
          item.checked = true
        }
      })
    })
    // 保存搜索历史记录
    if (state.sportSearchHistory.indexOf(e) == -1) {
      if (state.sportSearchHistory.length >= 10) {
        state.sportSearchHistory.pop()
      }
      state.sportSearchHistory.unshift(e)
    }
    uni.setStorageSync('sportSearchHistory', JSON.stringify(state.sportSearchHistory))
  })
}, 1000)
const historySelect = (val) => {
  state.searchValue = val
  searchFood(state.searchValue)
}

const typeSelect = (index) => {
  state.active = index
  state.detailList = state.typeList[state.active].list
  state.detailList.forEach((item) => {
    state.selected.forEach((i) => {
      if (i.sportId == item.sportId) {
        item.checked = true
      }
    })
  })
  // 解决view层不同步问题，返回顶部
  scrollTop.value = oldScrollTop.value
  nextTick(() => {
    scrollTop.value = 0
  })
}
const scrollTo = (e) => {
  oldScrollTop.value = e.detail.scrollTop
}
const sportAdd = async (item: any, type: string) => {
  console.log(item)
  state.addType = type
  item.duration = 30
  state.addSport = item

  if (state.hasWeight) {
    state.setShow = true
    await getcalculateEnergy()
  } else {
    state.weightShow = true
  }

  setTimeout(() => {
    // 解决弹窗打开时，input无法获取焦点问题
    state.tipFocus = true
  }, 100)
}

// 计算能量
const getcalculateEnergy = async () => {
  calculateEnergy({
    empi: state.userInfo.empi,
    actionType: state.addSport.actionType,
    sex: state.userInfo.gender == '男性' ? 1 : 2,
    minutes: Number(state.addSport.duration),
    sportId: state.addSport.sportId
  }).then(async (res) => {
    console.log(res)
    state.addSport.energy = res.data.energyValue
  })
}
// 获取体重
const getWeight = () => {
  get_new_weight({ empi: state.userInfo.empi }).then((res) => {
    if (res.data && res.data[0].itemValue) {
      state.hasWeight = true
      state.nowWeight = res.data[0].itemValue
    }
  })
}

const weightConfirm = () => {
  if (!state.nowWeight) {
    uni.showToast({
      title: '请先填写当前体重!',
      icon: 'error'
    })
    return
  }
  let params = {
    empi: state.userInfo.empi,
    weight: Number(state.nowWeight),
    collectTime: parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}').replace(/\//g, '-') + ':00',
    dataSource: 'MANUAL'
  }
  save_new_weight(params).then((res) => {
    console.log('成功', res)
    state.hasWeight = true
    state.weightShow = false
  })
}

const sportSelect = throttle(async () => {
  if (
    !state.addSport.duration ||
    state.addSport.duration == '0' ||
    isNaN(state.addSport.duration)
  ) {
    uni.showToast({
      title: '请输入正确时间!',
      icon: 'error'
    })
    return
  }
  state.detailList.forEach((item) => {
    if (item.sportId == state.addSport.sportId) {
      item.checked = true
    }
  })
  if (state.addType === 'search') {
    state.searchList.forEach((item) => {
      if (item.sportId == state.addSport.sportId) {
        item.checked = true
      }
    })
  }
  state.selected.push(state.addSport)
  state.setShow = false
  state.tipFocus = false
  // 直接回到记录页
  state.searchValue = ''
  state.searchFocus = false
  state.isSearch = false
  state.searchList = []
}, 300)
const onKey = (e) => {
  const sys = uni.getSystemInfoSync()
  // 自定义弹出键盘事件
  if (e.detail.height) {
    state.bottomHeight = e.detail.height * 2 - sys.safeAreaInsets.bottom * 2 - 36
  } else {
    state.bottomHeight = 0
  }
}
const onInput = debounce(async (e) => {
  if (e.detail.value * 1 > 3000) {
    state.addSport.duration = 3000
  }
  if (!state.addSport.duration || isNaN(state.addSport.duration)) {
    state.addSport.energy = 0
  } else {
    await getcalculateEnergy()
  }
}, 200)

const showSelectSport = () => {
  if (state.selected.length) {
    state.mealShow = true
  }
}

const weightfixed = (val: any) => {
  const textArr = val.target.value.split('.')
  if (textArr.length > 1 && textArr[1].length > 1) {
    state.nowWeight = Number(textArr[0] + '.' + textArr[1]).toFixed(1)
  }
  if (Number(state.nowWeight) > 200) {
    state.nowWeight = '200'
  }
}

const close = () => {
  state.setShow = false
  state.tipFocus = false
  state.bottomHeight = 0
}
const deleteSport = (item, index) => {
  state.selected.splice(index, 1)
  state.typeList.forEach((i) => {
    i.list.forEach((j) => {
      if (j.dietCode === item.dietCode) {
        j.checked = false
      }
    })
  })

  if (state.selected.length === 0) {
    state.mealShow = false
  }
}
const finish = () => {
  const data = state.selected.map((vo) => {
    return {
      takeTime: parseTime(state.date, '{y}-{m}-{d} {h}:{i}:{s}'),
      sportId: vo.sportId,
      sportName: vo.sportName,
      sportType: vo.sportType,
      consume: vo.energy,
      empi: state.userInfo.empi,
      duration: vo.duration,
      actionType: vo.actionType
    }
  })

  saveSportRecord(data).then((res) => {
    bus.emit('ManageRefresh')
    
    uni.navigateBack({
      delta: 1
    })
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  .search {
    background: #fff;
  }

  .search_content {
    height: calc(100vh - 152rpx);
    padding: 20rpx 0;
    background: #fff;

    .search_history {
      margin: 0 32rpx;

      .history_top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .title {
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
        }

        .img_del {
          width: 40rpx;
          height: 40rpx;
          color: #999;
        }
      }

      .history_content {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        justify-content: flex-start;

        .history_item {
          padding: 10rpx 30rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #666;
          background: #fafafa;
          border-radius: 30rpx;
        }
      }
    }

    .nodata {
      text-align: center;

      .img_nodata {
        width: 320rpx;
        height: 240rpx;
        margin-top: 222rpx;
      }

      .nodata_text {
        font-size: 28rpx;
        font-weight: 400;
        color: #666;
      }
    }

    .search_list {
      height: calc(100vh - 152rpx);
      overflow: auto;
      background: #fff;

      .search_item {
        position: relative;
        box-sizing: border-box;
        // height: 160rpx;
        padding: 34rpx 32rpx;
        border-bottom: 1rpx solid #e5e6eb;
        display: flex;
        flex-direction: row;
        align-items: center;

        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: #222;
        }

        .power {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }

        .img_right {
          position: absolute;
          top: 50%;
          right: 32rpx;
          width: 40rpx;
          height: 40rpx;
          margin-top: -20rpx;
        }
      }
    }
  }

  .content {
    display: flex;
    height: calc(100vh - 256rpx - env(safe-area-inset-bottom));
    border-top: 1rpx solid #e5e6eb;

    .left {
      width: 244rpx;
      overflow: auto;

      .item {
        position: relative;
        height: 100rpx;
        padding-left: 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 100rpx;
        background: #fafafa;
        border-bottom: 1rpx solid #fff;

        &:nth-last-child(1) {
          border-bottom: 0rpx solid #fff;
        }

        &.on {
          color: #00d1b6;
          background: #fff;
        }

        .line {
          position: absolute;
          top: 50%;
          left: 0;
          width: 12rpx;
          height: 32rpx;
          margin-top: -16rpx;
          background: #00d1b6;
          border-radius: 0 4rpx;
        }
      }
    }

    .scroll-Y {
      height: calc(100vh - 256rpx - env(safe-area-inset-bottom));
      margin-top: 2rpx;
    }

    .right {
      flex: 1;
      //   overflow: auto;
      background: #fff;

      .item {
        position: relative;
        box-sizing: border-box;
        // height: 120rpx;
        padding: 40rpx 32rpx 38rpx;
        border-bottom: 1rpx solid #e5e6eb;
        display: flex;
        align-items: center;

        .name {
          margin-bottom: 10rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #222;
        }

        .power {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }

        .img_right {
          position: absolute;
          top: 50%;
          right: 32rpx;
          width: 40rpx;
          height: 40rpx;
          margin-top: -20rpx;
        }
      }
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12rpx 40rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1rpx solid #e5e6eb;

    .fixed_left {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .text {
        margin: 0 12rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #222;
      }

      .img_arrow {
        font-size: 32rpx;
        color: #b8bbbd;
        transform: translateY(2rpx);
      }

      .img_up {
        transform: rotateX(180deg);
      }
    }

    .left-label {
      display: flex;
      align-items: center;

      .img_type {
        color: #00d1b6;
        font-size: 52rpx;
      }

      .left-label-text {
        font-weight: 600;
        font-size: 30rpx;
        color: #222222;
      }

      ::v-deep .u-badge {
        z-index: 10;
      }
    }

    .fixed_btn {
      width: 280rpx;
      height: 88rpx;
      margin: 0;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }

    .disabled {
      background: #ccc;
    }
  }

  .u-popup {
    // 设置重量弹窗
    .food_info {
      padding: 0 32rpx;

      .title {
        width: 100%;
        height: 104rpx;
        font-size: 30rpx;
        font-weight: 700;
        line-height: 104rpx;
        color: #333;
        text-align: center;
      }

      .info_top {
        .name {
          margin-bottom: 10rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #222;
        }

        .power {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }

      .info_detail {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        margin: 26rpx 0 30rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999;
        border-top: 1rpx solid #e5e6eb;
        border-bottom: 1rpx solid #e5e6eb;

        .detail_item {
          flex: 1;
          text-align: center;

          .text {
            margin-bottom: 10rpx;
          }
        }
      }
      .cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 108rpx;
        padding: 0 32rpx;
        margin-bottom: 24rpx;
        background: #fafafa;
        border: 1rpx solid #e5e6eb;
        border-radius: 16rpx;

        .left {
          font-size: 30rpx;
          font-weight: 700;
          color: #222;
        }

        .right {
          display: flex;
          gap: 24rpx;
          justify-content: flex-end;
          font-size: 30rpx;
          font-weight: 400;
          color: #222;

          .form_input {
            text-align: right;
          }

          text {
            display: inline-block;
            width: 42rpx;
            text-align: left;
          }
        }
      }

      .input_info {
        position: relative;
        text-align: center;

        .weight_input {
          width: 200rpx;
          height: 84rpx;
          margin: 0 auto;
          font-size: 60rpx;
          font-weight: 500;
          color: #1cd7ae;
          border-bottom: 4rpx solid #1cd7ae;
        }

        .unit {
          position: absolute;
          top: 0;
          right: 235rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #1cd7ae;
        }

        .hot {
          margin-top: 16rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #666;
        }
      }

      .submit {
        width: 100%;
        height: 88rpx;
        padding: 0 !important;
        margin: 76rpx 0 32rpx;
        font-size: 32rpx !important;
        font-weight: 500;
        line-height: 88rpx !important;
        color: #fff;
        background: #00d1b6;
        border-radius: 50rpx;
      }
    }
    // 查看已选
    .total {
      margin: 34rpx 32rpx 48rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #666;
    }

    .lists {
      max-height: 700rpx;
      padding: 0 32rpx;
      overflow: auto;

      .item {
        position: relative;
        height: 96rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #e5e6eb;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 32rpx;

        .name {
          font-size: 32rpx;
          font-weight: 600;
          color: #222;
        }

        .power {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }

        .img_del {
          color: #999;
          width: 40rpx;
          height: 40rpx;
        }

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }

  ::v-deep .u-search {
    padding: 24rpx 32rpx;
  }

  ::v-deep .u-search__content__input--placeholder {
    font-size: 30rpx !important;
    color: #999 !important;
  }

  ::v-deep .u-search__content {
    justify-content: flex-start;
    height: 80rpx !important;
    padding: 20rpx 24rpx !important;
    background-color: #fafafa !important;
    border-radius: 40rpx !important;
  }

  ::v-deep .u-search__content__input {
    font-size: 30rpx !important;
    background-color: #fafafa !important;
  }

  ::v-deep .u-search__action {
    font-size: 30rpx !important;
    font-weight: 500;
    line-height: 80rpx !important;
    color: #00d1b6 !important;
  }

  ::v-deep .u-icon__icon {
    font-size: 32rpx !important;
    line-height: 50rpx !important;
  }

  ::v-deep .u-loading-icon {
    // 加载logo
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
